<template>
  <view>
    <!-- #ifndef MP-WEIXIN-->
    <my-navbar leftText="使用记录" @leftClick="back"></my-navbar>
    <!-- #endif -->
    <div class="tabs_box">
      <view class="box">
        <u-subsection
          class="tabs"
          :list="list"
          :current="current"
          @change="changeTab"
        ></u-subsection>
      </view>
    </div>

    <view class="content" v-show="current == 0">
      <view class="goods" v-for="(listitem1, index) in dataList1" :key="index">
        <!-- <view class="logo"> -->
        <!-- <image src="" mode="scaleToFill" /> -->
        <!-- <text>{{ listitem1.company_name }}</text>
          <image src="/static/images/right.png" mode="scaleToFill" />
        </view>-->
        <!-- <view class="solid"></view> -->
        <view class="centers">
          <view class="copon_box copon_used flex-btw">
            <!--  v-for="item in listitem1.coupons"
            :key="item.id" -->
            <view class="left flex-center">{{
              listitem1.coupons.type == 1 ? "普通券" : "现金券"
            }}</view>
            <view class="center flex-btw">
              <view class="center_left">
                <view class="price">￥{{ listitem1.coupons.money }}</view>
                <view v-if="listitem1.coupons.type == 1" class="rule"
                  >满{{
                    Math.floor(listitem1.coupons.order_money_limit)
                  }}可用</view
                >
                <view v-else-if="listitem1.coupons.type == 2" class="rule"
                  >无门槛</view
                >
                <view
                  class="info"
                  @click="alertInfo(listitem1.coupons.describe)"
                >
                  <u-icon name="question-circle"></u-icon>
                  <text class="info_text">使用说明</text>
                </view>
              </view>
              <view class="center_right">
                <!-- <view v-if="listitem1.coupons.type == 1" class="rule"
                  >满{{ listitem1.coupons.order_money_limit }}使用</view
                >
                <view v-else-if="listitem1.coupons.type == 2" class="rule"
                  >无门槛</view
                > -->
                <view class="rule">{{ listitem1.company_name }}</view>
                <view class="limit" v-if="listitem1.coupons.get_limit"
                  >每位用户限制{{ listitem1.coupons.get_num }}张</view
                >
                <view class="limit" v-else>不限量</view>
                <view class="time" v-if="listitem1.coupons.expire_type == 1">
                  {{ parseTime(listitem1.coupons.start_time) }}~{{
                    parseTime(listitem1.coupons.end_time)
                  }}
                </view>
                <view
                  class="time"
                  v-else-if="listitem1.coupons.expire_type == 2"
                  >限{{ listitem1.coupons.expire_days }}天内使用
                </view>
              </view>
            </view>
            <view class="right">已使用</view>
          </view>
        </view>
      </view>
      <view v-if="nodata" class="nodata-box">
        <image
          class="nodata-pic"
          src="../../../static/image/nodata.png"
        ></image>
        <view class="nodata-txt">暂无数据</view>
      </view>
    </view>

    <view class="content" v-show="current == 1">
      <view class="goods" v-for="(listitem2, index) in dataList2" :key="index">
        <view class="logo">
          <!-- <image src="" mode="scaleToFill" /> -->
          <text>{{ listitem2.company_name }}</text>
          <image src="/static/images/right.png" mode="scaleToFill" />
        </view>
        <view class="solid"></view>
        <view class="centers">
          <view class="copon_box copon_used flex-btw">
            <!--     v-for="item in listitem2.coupons_list"
            :key="item.id" -->
            <view class="left flex-center">{{
              listitem2.coupons == 1 ? "普通券" : "现金券"
            }}</view>
            <view class="center flex-btw">
              <view class="center_left">
                <view class="price">￥{{ listitem2.coupons.money }}</view>
                <view class="rule"
                  >满{{ istitem2.coupons.order_money_limit }}使用</view
                >
                <view
                  class="info"
                  @click="alertInfo(istitem2.coupons.describe)"
                >
                  <u-icon name="question-circle"></u-icon>
                  <text class="info_text">使用说明</text>
                </view>
              </view>
              <view class="center_right">
                <view class="rule">{{ listitem2.company_name }}</view>
                <view class="limit" v-if="istitem2.coupons.get_limit"
                  >每位用户限制{{ istitem2.coupons.get_num }}张</view
                >
                <view class="limit" v-else>不限量</view>
                <view class="time" v-if="istitem2.coupons.expire_type == 1">
                  {{ parseTime(istitem2.coupons.start_time) }}~{{
                    parseTime(istitem2.coupons.end_time)
                  }}
                </view>
                <view class="time" v-else-if="istitem2.coupons.expire_type == 2"
                  >限{{ istitem2.coupons.expire_days }}天内使用
                </view>
              </view>
            </view>
            <view class="right">已过期</view>
          </view>
        </view>
      </view>
      <view v-if="nodata1" class="nodata-box">
        <image
          class="nodata-pic"
          src="../../../static/image/nodata.png"
        ></image>
        <view class="nodata-txt">暂无数据</view>
      </view>
    </view>

    <u-modal
      v-model="info.show"
      :content="info.value"
      title="使用说明"
      confirm-color="#4FA388"
    ></u-modal>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      list: [
        {
          name: "已使用",
        },
        {
          name: "已过期",
        },
      ],
      current: 0,

      dataList1: [],
      dataList2: [],
      pages1: {
        page: 1,
        count: null,
      },
      pages2: {
        page: 1,
        count: null,
      },
      info: {
        value: "",
        show: false,
      },
      nodata: false,
      nodata1: false,
    };
  },
  onLoad() {
    this.getData(1, 1);
    this.getData(1, 2);
  },
  methods: {
    getData(page, status) {
      // 1 已使用 2 已过期
      var params = {
        size: 7,
        page,
        status,
      };
      $https("GET", "getMyCouponsList", params, (res) => {
        console.log("res", res);
        if (res.data.errcode == 0) {
          var list = res.data.data.list;
          if (status == 1) {
            if (list.length == 0) {
              this.nodata = true;
            } else {
              this.dataList1 = this.dataList1.concat(list);
              this.pages1.count = res.data.data.count;
              this.pages1.page = page;
              this.nodata = false;
              console.log("this.dataList1", this.dataList1);
            }
          } else if (status == 2) {
            if (list.length == 0) {
              this.nodata1 = true;
            } else {
              this.dataList2 = this.dataList2.concat(list);
              this.pages2.count = res.data.data.count;
              this.pages2.page = page;
              this.nodata1 = false;
            }
          }
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      });
    },
    changeTab(index) {
      this.current = index;
    },
    alertInfo(info) {
      this.info.value = info;
      this.info.show = true;
    },
    parseTime(time) {
      time = time * 1000;
      var date = new Date(time);
      var year = date.getFullYear(),
        month =
          date.getMonth() + 1 < 9
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1,
        day = date.getDate() < 9 ? "0" + date.getDate() : date.getDate();
      return `${year}-${month}-${day}`;
    },
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
  },
  onReachBottom() {
    if (this.current == 0) {
      if (this.dataList1.length < this.pages1.count) {
        this.pages1.page++;
        this.getData(this.pages1.page, 1);
      }
    } else if (this.current == 1) {
      if (this.dataList2.length < this.pages2.count) {
        this.pages2.page++;
        this.getData(this.pages2.page, 2);
      }
    }
  },
};
</script>

<style lang="scss">
.tabs_box {
  padding: 38rpx;
  background: #f6f6f7;
  z-index: 999;
  position: fixed;
  top: 0;
  // #ifndef MP-WEIXIN
  top: calc(80rpx + var(--status-bar-height));
  // #endif
  left: 0;
  right: 0;
}

.content {
  // padding: 0 56rpx 20rpx;
  margin-top: 150rpx;

  .goods {
    background: #ffffff;
    border-radius: 10rpx 10rpx 0rpx 0rpx;
    margin: 10rpx 25rpx 0 25rpx;
    font-family: PingFang SC;
    .logo {
      height: 90rpx;
      padding-left: 30rpx;
      display: flex;
      align-items: center;
      text {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      image {
        margin-left: 10rpx;
        height: 20rpx;
        width: 18rpx;
      }
    }
    .solid {
      width: 690rpx;
      height: 2rpx;
      background: #ebebeb;
      margin-left: 4rpx;
    }

    .centers {
      padding: 20rpx 30rpx 10rpx 30rpx;
    }
  }
}

.copon_box {
  width: 638rpx;
  height: 164rpx;
  background: url(../../../static/image/coupon.png) no-repeat;
  background-size: 100% 100%;
  padding: 0 30rpx;
  margin-bottom: 20rpx;

  .left {
    min-height: 150rpx;
    width: 40rpx;
    word-wrap: wrap;
    font-size: 28rpx;
    line-height: 35rpx;
    border-radius: 4rpx;
    text-align: center;
    padding: 10rpx 0;
    transform: scale(0.8);
  }

  .right {
    width: 40rpx;
    word-wrap: wrap;
    font-size: 22rpx;
    line-height: 26rpx;
    border: 1px solid #fff;
    border-radius: 6rpx;
    text-align: center;
    padding: 10rpx 0;
    margin-left: 40rpx;
  }

  .center {
    flex: 1;

    .center_left {
      text-align: center;
      width: 50%;

      .price {
        font-size: 40rpx;
        font-weight: bold;
      }

      .info {
        color: #a4a4a4;
        font-size: 16rpx;

        .info_text {
          text-decoration: underline;
          margin-left: 4rpx;
        }
      }
    }

    .center_right {
      text-align: center;
      width: 50%;

      .rule {
        font-size: 24rpx;
      }

      .limit {
        font-size: 20rpx;
        // #ifndef MP-WEIXIN
        transform: scale(0.8);
        // #endif
      }

      .time {
        font-size: 20rpx;
        border-radius: 16rpx;
        padding: 4rpx;
        // #ifndef MP-WEIXIN
        transform: scale(0.7);
        line-height: 22rpx;
        // #endif
        // #ifdef MP-WEIXIN
        transform: scale(0.9);
        // #endif
      }
    }
  }

  &.copon {
    .left {
      background: #f6d32d;
      color: #c6272a;
    }

    .right {
      color: #f6d32d;
      border-color: #f6d32d;
    }

    .center_left {
      .price {
        color: #c6272a;
      }
    }

    .center_right {
      color: #757575;

      .rule {
        color: #191919;
      }

      .time {
        background: #e9adae;
      }
    }
  }

  &.copon_used {
    background: url(../../../static/image/coupon_used.png) no-repeat;
    background-size: 100% 100%;

    .left,
    .right {
      background: #cccccc;
      color: #787878;
      border-color: #b3b3b3;
    }

    .center_left {
      .price {
        color: #cccccc;
      }

      .rule {
        color: #cccccc;
      }
    }

    .center_right {
      color: #cccccc;

      .rule {
        color: #cccccc;
      }

      .time {
        background: #ececec;
      }
    }
  }
}

.nodata-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40rpx;
}

.nodata-pic {
  width: 400rpx;
  height: 300rpx;
}

.nodata-txt {
  text-align: center;
  font-size: 32rpx;
  color: #666666;
  padding-top: 30rpx;
}
</style>
